<template>
	<view>
		<view class="attention-wrap">
			<text class="attention-myInterest1">My Publish </text>
			<text class="attention-myInterest2">我发表的帖子</text>
		</view>
		<view class="attention-wrap-bianji" @click="bianjis">
			<text>{{bianji}}</text>
		</view>

		<view v-for="(item,index) in myinfoData" :key="index">
			<view class="article-wrap">
				<view class="article-wrap-heard">
					<view class="article-wrap-avalter">
						<view class="article-wrap-avalter-wzs">
							<image :src="item.userinfoData[0].avatarUrl" mode=""></image>
							<text>{{item.userinfoData[0].nickName}}</text>
						</view>
						<view class="my-dele" @click="delefabiao(item._id)" v-if="deletemyfabiaos">
							<image src="../../static/delete.svg" mode="" class="delete-myfabiao"></image>
						</view>
					</view>
				</view>
				<view class="article-wrap-text" @click="preimage(item._id)">
					<text>{{item.textarea}}</text>
					<view class="article-wrap-text-img">
						<block v-for="(items,index) in item.uploadImg" :key="index">
							<image :src="items" mode="aspectFill"></image>
						</block>
					</view>
				</view>
				<view class="article-wrap-time">
					<text>发表时间：{{item.time}}</text>
				</view>
			</view>
		</view>

		<!-- 无数据显示 -->
		<view v-if="showsdata">
			<vue-kong></vue-kong>
		</view>

		<!-- 进入页面加载 -->
		<view v-if="showLoading">
			<home-load></home-load>
		</view>

		<!-- 上拉加载动画 -->
		<view v-if="uploadShow">
			<uploading></uploading>
		</view>

		<view class="noneData" v-if="noneData">
			<text>没有更多数据了...</text>
		</view>
		
		<!-- 反馈组件 -->
		<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
		
	</view>
</template>

<script>
	//顶部消息提示插件
	 import HMmessages from "@/HMtolel/HM-messages/HM-messages.vue"
	
	export default {
		data() {
			return {
				myinfoData: [], //我的发表
				Datalength: '',
				showsdata: true,
				pageId: 0,
				opens: "",
				noneData: false,
				uploadShow: false,
				showLoading: true,
				bianji:'编辑',
				deletemyfabiaos:false
			}
		},
		components:{
			HMmessages
		},
		methods: {
			//用户openid
			getUploadData() {
				const db = wx.cloud.database()
				db.collection('users').get()
					.then(res => {
						// console.log(res.data[0]._openid)
						let openid = res.data[0]._openid
						this.opens = openid
						this.whereUploadData(openid)
					}).catch(err => {
						console.log(err)
					})
			},
			
			//编辑
			bianjis(){
				this.bianji=this.bianji=='完成'? '编辑':'完成'
				if(this.bianji=='完成'){
					this.deletemyfabiaos = true
				}else{
					this.deletemyfabiaos = false
				}
			},
			
			//删除贴子
			delefabiao(textId){
				this.showLoading = true;
				console.log(textId)
				const db = wx.cloud.database().collection('textarea').where({
					_id:textId
				}).remove().then(res=>{
					// console.log(res)
					this.getUploadData()
					this.showLoading = false;
					this.HMmessages.show("删除成功！",{icon:'success',fontColor:'#000000',background:'#24f416',iconColor:'#000000'})
				}).catch(err=>{
					console.log(err)
					this.HMmessages.show("删除失败！",{icon:'success',fontColor:'#000000',background:'#f40004',iconColor:'#000000'})
				})
			},

			//查询和当前用户openi匹配的数据
			whereUploadData(id) {
				const db = wx.cloud.database()
				db.collection('textarea').where({
						_openid: id
					}).limit(4)
					.orderBy('time', 'desc')
					.get().then(res => {
						if (res.data.length == 0) {
							this.showsdata = true
						} else {
							this.showsdata = false
						}
						this.Datalength = res.data.length
						this.myinfoData = res.data
						this.showLoading = false
					}).catch(err => {
						console.log(err)
					})
			},
			//上拉加载
			onReachBottom() {
				this.uploadShow = true
				let id = this.opens
				this.pageId++
				const db = wx.cloud.database()
				db.collection('textarea').where({
						_openid: id
					}).limit(4)
					.skip(this.pageId * 4)
					.orderBy('time', 'desc')
					.get()
					.then(res => {
						if (res.data.length == 0) {
							this.uploadShow = false;
							this.noneData = true
						}
						// console.log(res)
						//请求下来合并到一起
						this.myinfoData = [...this.myinfoData, ...res.data]
						this.uploadShow = false
						this.noneData = true
					}).catch(err => {
						console.log(err)
					})

			},
			preimage(ids) {
				console.log(ids)
				wx.navigateTo({
					url: '../details/details?id=' + ids
				})
			}
		},
		onLoad() {
			this.getUploadData()
		}
	}
</script>

<style lang="scss">
	.attention-wrap-bianji{
		position: absolute;
		top:20upx;right: 5upx;
		text{
			padding: 10upx 20upx;
			border-radius: 15upx;
			border: 1px solid #ff4c20;
			color: #ffffff;
		}
	}
	.article-wrap {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 20upx;
		box-sizing: border-box;
		margin-bottom: 20upx;

		.article-wrap-heard {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.article-wrap-avalter {
				display: flex;
				justify-content: start;
				align-items: center;
				padding: 10upx 20upx 20upx 1upx;

				.article-wrap-avalter-wzs {
					display: flex;
					justify-content: start;
					align-items: center;
				}

				.my-dele {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-left: 50upx;
					.delete-myfabiao {
						width: 40upx;
						height: 40upx;
					}
				}

				image {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					margin-right: 20upx;
				}

				text {
					color: #505050;
					font-size: 35upx;
					font-weight: bold;
				}
			}

			.article-wrap-guanzhu {
				padding: 10upx 30upx;
				background-color: #5500ff;
				border-radius: 40upx;
				color: #ffffff;
				box-shadow: 0upx 0upx 20upx rgba(0, 170, 255, 0.4);
			}

		}

		.article-wrap-bottom {
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-top: #f0f0f0 1px solid;
			padding: 15upx;

			.article-wrap-dianzan {
				display: flex;
				justify-content: space-around;
				align-items: center;

				image {
					width: 40upx;
					height: 40upx;
					margin-right: 10upx;
				}

				text {
					color: #7e7e7e;
				}
			}
		}

		.article-wrap-text {
			padding: 2upx 15upx;

			text {
				font-family: "微软雅黑";
				font-size: 34upx;
				color: #161616;
			}

			.article-wrap-text-img {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				image {
					width: 338upx;
					height: 338upx;
					padding: 20upx 25upx 5upx 0;
					box-sizing: border-box;
				}
			}
		}

		.article-wrap-time {
			margin: 20upx;

			text {
				font-size: 28upx;
				color: #666666;
			}
		}
	}

	.attention-wrap {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 10upx;
		width: 100%;
		height: 400upx;
		background-image: linear-gradient(to top, #55ffff 5%, #1995e7 100%);
		border-bottom-right-radius: 40upx;
		border-bottom-left-radius: 40upx;

		.attention-myInterest1 {
			color: #ffffff;

		}

		.attention-myInterest2 {
			color: #ffffff;
			font-size: 40upx;
			font-weight: bold;

		}

	}

	.noneData {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 30upx;

		text {
			color: #007AFF;
		}
	}
</style>
